<!DOCTYPE html>
<html>
<head>
  <meta  charset="utf-8">
  <title>index</title>
  <link rel="stylesheet" href="css/index.css">
  <link rel="stylesheet" href="icon/iconfont.css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
  <!--头部-->
  <header>
    <div class="logo-box">
      <!--logo 区域-->
    <div class="logo">
      <h1>C<b>a</b>lm</h1>
      <span>我的博客</span>
    </div>
    <!--导航栏-->
    <nav>
       <ul>
         <li>
           <a href="#">首页</a>
         </li>
         <li>
         <a href="#">博客</a>
         </li>
         <li class="nav-active">
           <a href="#">公告</a>
         </li>
         <li>
         <a href="#">联系</a>
         </li>
       </ul>
    </nav>
  </div>
  </header>
  <!--Blog图片背景-->
  <div class="title-list">
    <ul>
      <li>
        <a href=" ">
          <img src="images/4.jpg" width="960" height="150" border=0 alt="1" />
          </a>
        </li>
</div>
<!-- 底色背景-->
<div class="content">
  <ul>
    <li>
      <a href=" ">
        <img src="images/1.jpg" width="200" height="150" border=0 alt="1" />
        </a>
      </li>
  </div>
<!--尾部-->
    <div class="news">
      <div class="new-box">
        <div class="new-list">
          <h3>售后服务</h3>
          <div>
              <p>服务声明</p>
              <p>支付说明</p>
              <p>意外保险</p>
              <p>地址：北京，上海，银川，等等</p>
          </div>
                  <ul class="contact">
                    <li class="qq">
                      <a href="">
                        <i class="iconfont icon-qq"></i>
                      </a>
                    </li>
                    <li class="wechat">
                           <a href="">
                               <i class="iconfont icon-wechat"></i>
                           </a>
                       </li>
                       <li class="weibo">
                           <a href="">
                               <i class="iconfont icon-weibo"></i>
                           </a>
                       </li>
                   </ul>
               </div>
               <div class="new-list">
                   <h3>联系我们</h3>
                         <div>
                         <p>全国联系热线：1234567</p>
                         <p>24小时在线订购</p>
                       </div>
                     </div>
                <div class="new-list">
                  <h3>热门咨询</h3>
                  <div>
                     	<p>咨询宠物信息</p>
                      <p>咨询宠物习俗</p>
                      <p>如何照顾宠物</p>
                      <p>宠物日常需求</p>
                      <p>宠物日常生病</p>
                    </div>
                </div>
                  <div class="new-list">
                    <h3>宠物狗的日常</h3>
                    <div>
                       	<p>喝水</p>
                        <p>吃饭</p>
                        <p>睡觉</p>
                        <p>打豆豆</p>
                        <p>逗你玩</p>
                      </div>
                  </div>
                       <div class="new-list">

                         <h3>狗狗的爱情</h3>
                         <ul>
                           <li>
                             <a href=" ">
                               <img src="images/1.jpg" width="50" height="50" border=0 alt="1" />
                               </a>
                             </li>
                             <li>
                               <a href="#">
                                 <img src="images/2.jpg" width="50" height="50" border=0 alt="2" />
                               </li>
                               <li>
                                 <a href="#">
                                   <img src="images/3.jpg" width="50" height="50" border=0 alt="3" />
                                   </a>
                                 </li>
                                 <li>
                                   <a href="#">
                                     <img src="images/4.jpg" width="50" height="50" border=0 alt="4" />
                                     </a>
                                   </li>
                                   <li>
                                     <a href="#">
                                       <img src="images/5.jpg" width="50" height="50" border=0 alt="5" />
                                       </a>
                                     </li>
                                     <li>
                                       <a href="#">
                                         <img src="images/6.jpg" width="50" height="50" border=0 alt="6" />
                                         </a>
                                       </li>
                                       <li>
                                         <a href="#">
                                           <img src="images/7.jpg" width="50" height="50" border=0 alt="7" />
                                           </a>
                                         </li>
                                         <li>
                                           <a href="#">
                                             <img src="images/8.jpg" width="50" height="50" border=0 alt="8" />
                                             </a>
                                           </li>

                                       </ul>
                   </div>
                </div>
</div>
<footer>
  <div class="non-list">
    <h3>欢迎来到我的博客</h3>
  </div>
</footer>

</body>
</html>
